<template>
  <div>
    <div>
      <!-- 角色添加 -->
      <el-button
        icon="el-icon-s-custom"
        type="success"
        @click="AddRole"
        style="float: right"
        >角色添加</el-button
      >
      <el-dialog title="创建数据" :visible.sync="dialogVisible" width="30%">
        <RoleAdd @Popup="Popup"></RoleAdd>
      </el-dialog>
      <!-- 权限添加 -->
      <el-button
        style="float: right"
        type="primary"
        icon="el-icon-film"
        @click="AddsPer"
        >权限添加</el-button
      >
      <el-dialog title="创建数据" :visible.sync="PerdialogVisible" width="30%">
        <PerAdd @AddPre="AddPre"></PerAdd>
      </el-dialog>
    </div>
    <!-- 角色显示 -->
    <el-table :data="rolelist" border style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="Id" label="角色id" lang="create">
      </el-table-column>
      <el-table-column prop="RoleName" label="角色名称" lang="create">
      </el-table-column>
      <el-table-column label="操作" lang="create">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="UpdPer(scope.row.Id)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="RoleDel(scope.row.Id)"
            >删除</el-button
          >
          <el-button circle type="warning" @click="GetPer(scope.row.Id)"
            >权限分配</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 角色权限分配 -->
    <div>
      <el-dialog
        title="角色权限分配"
        :visible.sync="dialogVisibles"
        width="30%"
        v-if="dialogVisibles"
      >
        <Perlist @PreAdd="PreAdd" :PerRoleid="PerRoleid"></Perlist>
      </el-dialog>
    </div>
    <!-- 角色修改 -->
    <div>
      <el-dialog title="角色修改" :visible.sync="UpddialogVisibles" width="30%">
        <RoleUpd
          @UpdesRpe="UpdesRpe"
          v-if="UpddialogVisibles"
          :Roleids="Roleids"
        ></RoleUpd>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import RoleAdd from "./RoleAdd.vue";
import Perlist from "./PerList.vue";
import RoleUpd from "./RoleUpd.vue";
import PerAdd from "./PerAdd.vue";
export default {
  components: {
    RoleAdd,
    Perlist,
    RoleUpd,
    PerAdd,
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisibles: false,
      UpddialogVisibles: false,
      PerdialogVisible: false,
      rolelist: [],
      Roleids: null,
      PerRoleid: null,
    };
  },
  //加载
  created() {
    this.GetList();
  },
  methods: {
    //角色权限添加
    PreAdd() {
      this.dialogVisibles = false;
      this.GetList();
    },
    //角色分配权限
    GetPer(PerRoleid) {
      this.dialogVisibles = true;
      this.PerRoleid = PerRoleid;
    },
    //权限添加弹出
    AddsPer() {
      this.PerdialogVisible = true;
    },
    //权限添加
    AddPre() {
      this.PerdialogVisible = false;
      this.GetList();
    },
    //删除
    RoleDel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete(
              "http://localhost:15670/api/RoleUser/DeleteRoleDto?id=" + id
            )
            .then((res) => {
              if (res.data.Success) {
                this.$message.success(res.data.Message);
                this.GetList();
              } else {
                this.$message.success(res.data.Message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //角色修改
    UpdesRpe() {
      this.UpddialogVisibles = false;
      this.GetList();
    },
    //角色修改
    UpdPer(Roleids) {
      this.UpddialogVisibles = true;
      this.Roleids = Roleids;
    },
    //角色添加
    AddRole() {
      this.dialogVisible = true;
    },
    //角色添加
    Popup() {
      this.dialogVisible = false;
      this.GetList();
    },
    //全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //角色显示
    GetList() {
      this.axios
        .get("http://localhost:15670/api/RoleUser/GetRoleDto")
        .then((res) => {
          this.rolelist = res.data.Data;
        });
    },
  },
};
</script>
<style>
</style>